<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="H5页面库"
      :request="getList"
      :columns="columns"
      :search="searchObj"
      @selectionChange="handleSelectionChange"
    >
      <template #toolbar>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleShowAddEdit()"
        >
          新建页面
        </el-button>
        <el-button
          :disabled="selectedArr.length <= 0"
          icon="el-icon-delete"
          @click="handleDelete()"
        >
          批量删除
        </el-button>
      </template>
      <template #expand="{ row }">
        <el-card shadow="never">URL：{{ row.url }}</el-card>
      </template>
      <template #title="{ row }">
        <el-button type="text" @click="handleShowPage(row)">
          {{ row.title }}
        </el-button>
      </template>
      <template #status="{ row }">
        <el-tag size="mini" effect="dark" :type="statusEnum[row.status].type">
          {{ statusEnum[row.status].text }}
        </el-tag>
      </template>
      <template #date="{ row }">
        {{ row.create_time | parseTime }}
      </template>

      <template #operate="{ row }">
        <el-tooltip content="编辑" placement="top">
          <i
            class="el-icon-edit operate-button"
            @click="handleShowAddEdit(row)"
          ></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="删除" placement="top">
          <i
            class="el-icon-delete operate-button"
            @click="handleDelete([row])"
          ></i>
        </el-tooltip>
      </template>
    </pro-table>

    <!-- 页面详情 -->
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :visible.sync="showPageModal"
      direction="rtl"
      size="450px"
    >
      <page-detail :page="selectedRow" @close="showPageModal = false" />
    </el-drawer>

    <!-- 创建/编辑页面 -->
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :visible.sync="showAddEdit"
      direction="rtl"
      size="1200px"
      @closed="isAddEdit = false"
    >
      <add-edit
        v-if="isAddEdit"
        :page="selectedRow"
        @close="showAddEdit = false"
        @save="handleSavePage"
      />
    </el-drawer>
  </div>
</template>
<script>
import { GetList, DelItem } from '@/api/h5'
import PageDetail from './components/PageDetail'
import AddEdit from './components/AddEdit'
export default {
  name: 'Html5',
  components: { PageDetail, AddEdit },
  data() {
    return {
      statusEnum: {
        3: {
          type: 'warning',
          text: '待审核',
        },
        1: {
          type: 'success',
          text: '审核通过',
        },
        2: {
          type: 'danger',
          text: '审核不通过',
        },
      },
      showPageModal: false,
      selectedRow: {},
      isAddEdit: false,
      showAddEdit: false,
      selectedArr: [],
      columns: [
        { type: 'expand', tdSlot: 'expand' },
        { type: 'selection' },
        {
          label: '标题',
          tdSlot: 'title',
        },
        {
          label: '审核意见',
          prop: 'info',
          width: 480,
        },
        {
          label: '审核状态',
          tdSlot: 'status',
          align: 'center',
          width: 160,
        },
        {
          label: '创建时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },

        {
          label: '操作',
          tdSlot: 'operate',
          width: 120,
          align: 'center',
          fixed: 'right',
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'text',
            label: '',
            name: 'content',
            placeholder: '标题、正文、描述',
          },
        ],
      },
    }
  },

  methods: {
    async getList(params) {
      const { code, data } = await GetList(params)
      // const { code, data } = await new Promise(resolve => {
      //   setTimeout(() => {
      //     resolve({
      //       code: 200,
      //       data: {
      //         list: [
      //           {
      //             applicationId: '148946854485172173',
      //             auditRemark:
      //               'AI 审核不通过，等待人工审核，原因是Open api qps request limit reached',
      //             auditStatus: 'PENDING',
      //             body: '<p>阿斯蒂</p>',
      //             categoryId: '0',
      //             createTime: '2022-03-10T06:57:57.000+0000',
      //             enterpriseId: '141598637888113837',
      //             id: '218026893725663821',
      //             title: '微软',
      //             url: 'https://oss.fontdo.com/218026893725663821.html',
      //           },
      //           {
      //             applicationId: '148946854485172173',
      //             auditRemark: '同意!',
      //             auditStatus: 'SUCCESS',
      //             body: '<p>hello</p>',
      //             categoryId: '0',
      //             cover: 'https://oss.fontdo.com/187573333624095191.png',
      //             createTime: '2022-01-29T09:35:05.000+0000',
      //             description: 'test',
      //             enterpriseId: '141598637888113837',
      //             id: '187573668631544342',
      //             title: 'hell -com on',
      //             url: 'https://oss.fontdo.com/187573668631544342.html',
      //           },
      //         ],
      //         total: 100,
      //       },
      //     })
      //   }, 500)
      // })
      if (+code === 1) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
    handleSavePage() {
      this.$refs.pageBox.refresh()
      this.showAddEdit = false
    },
    handleSelectionChange(arr) {
      this.selectedArr = arr
    },
    async handleDelete(arr) {
      this.$confirm(
        '选定的条目及条目相关的数据将被删除且不可恢复，您是否确定删除？',
        '删除',
        {
          iconClass: 'el-icon-warning-outline warning',
          center: true,
          closeOnClickModal: false,
        }
      )
        .then(async () => {
          const { code, msg } = await DelItem({
            h5_id: arr
              ? arr.map(item => item.h5_id).join(',')
              : this.selectedArr.map(item => item.h5_id).join(','),
          })
          if (+code === 1) {
            this.$message.success(msg)
            this.$refs.pageBox.refresh()
          } else {
            this.$message.error(msg)
          }
        })
        .catch(() => {})
    },
    handleClickDeveloper(item) {
      this.selectedRow = item
      this.showDeveloper = true
    },
    handleShowAddEdit(item) {
      this.selectedRow = item || {}
      this.isAddEdit = true
      this.showAddEdit = true
    },
    handleShowPage(item) {
      this.selectedRow = item
      this.showPageModal = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
